<template>
	<view class="insurecontent">
		<view class="insurecontentbox">
			<view class="boxtitle">
				<view class="boxtitletext">活动信息</view>
				<view class="boxtitlebg"></view>
			</view>
			<view class="boxcontent">
				<view class="boxcontentleft">研学机构名称</view>
				<view class="boxcontentright">峰光研学-成都市峰光文化旅游有限公司</view>
			</view>
			<view class="boxcontent">
				<view class="boxcontentleft">研学活动</view>
				<view class="boxcontentright">暑假特辑 成都名校名企一日游走进哇哈哈</view>
			</view>
		</view>
		<view class="insurecontentbox">
			<view class="insurecontentbox1">
				<view class="boxtitle boxtitle1">
					<view class="boxtitletext">家长信息</view>
					<view class="boxtitlebg"></view>
				</view>
			</view>
			<!-- 表单 -->
			<view class="">
				<!-- 家长信息 -->
				<u--form labelWidth='95' labelPosition="left" :model="parentList">
					<u-form-item label="家长姓名" prop="userInfo.realName" borderBottom>
						<u--input v-model="parentList.realName" border="none" placeholder="请填写家长姓名"></u--input>
					</u-form-item>
					<u-form-item label="家长电话" prop="userInfo.phoneNubmer" borderBottom>
						<u--input v-model="parentList.phoneNubmer" border="none" placeholder="请填写家长电话"></u--input>
					</u-form-item>
					<u-form-item label="家长身份证号" prop="userInfo.docNumber" borderBottom>
						<u--input v-model="parentList.docNumber" border="none" placeholder="请填写家长身份证号"></u--input>
					</u-form-item>
				</u--form>
				<view style="margin-top: 30rpx;" class="insurecontentbox1">
					<view class="boxtitle boxtitle1">
						<view class="boxtitletext">学生信息</view>
						<view class="boxtitlebg"></view>
					</view>
				</view>
				<!-- 孩子信息 -->
				<u--form v-for="(item,index) in childList" :key="index" labelWidth='95' labelPosition="left"
					:model="item">
					<u-form-item label="学生姓名" borderBottom>
						<u--input v-model="item.realName" border="none" placeholder="请填写学生姓名"></u--input>
					</u-form-item>
					<u-form-item style="border-bottom:1rpx solid #EBEBEB" label="与家长关系" borderBottom
						@click="showSex = true;">
						<view style="color:#333" @click="relation(index)">{{item.relationship}}</view>
					</u-form-item>
					<u-form-item label="学生身份证号" borderBottom>
						<u--input v-model="item.phoneNubmer" border="none" placeholder="请填写学生身份证号"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="addxuesheng">
				<u-button @click='addChild' class="addxuesheng" type="primary" :plain="true" icon="plus-circle"
					text="新增学生"></u-button>
			</view>
		</view>
		<view class="bottombutton">
			<view>
				<label class="radio">
					<u-checkbox-group v-model="value" placement="column" @change="groupChange">
						<u-checkbox v-for="(item, index) in rodiolist" :key="index" :label="item.name" :name="item.name"
							size="12" shape="square">

						</u-checkbox>
					</u-checkbox-group>
					<view class="radioxieyi">
						<span @click='showBook=true' style="color: #005bea;">《知情同意书》</span>
					</view>
				</label>
			</view>
			<view @click='registration' class="button-bottom">立 即 登 记</view>
		</view>
		<!-- 关系弹框 -->
		<u-popup :show="show" @close="close" @open="open">
			<view v-for="(item,index) in actions" :key="index" @click="relaClick(item)" class="textopen">{{item.name}}
			</view>
			<view class="textopenheng"></view>
			<view @click="show=false" class="textopentitle">取消</view>
		</u-popup>
		<!-- 提示 -->
		<u-toast ref="uToasts"></u-toast>
		<!-- 知情书 -->
		<u-popup :show="showBook" @close="close" @open="open">
			<view class="insurecontentBook">
				<view style="width:100%;height:60rpx">
					<view style="float:right" class="">
						<u-icon @click="showBook=false"  name="close" color="#666" size="26"></u-icon>
					</view>
				</view>
				<view style="margin-bottom:30rpx" class="insurecontentbox1">
					<view style="" class="boxtitle2">
						<view class="boxtitletext boxtitletext1">知情同意书</view>
						<view class="boxtitlebg1"></view>
					</view>
				</view>
				<view style="font-size: 25rpx;color: #000000;" class="">
					兹有监护人______（姓名），身份证号码：______ ，与
					被监护人______ （未成年人姓名），身份证号码：
					______ ，系（父子女/母子女/其他法定监护关系）关系。
					现监护人同意______ （研学机构全称）作为投保人，以
					______ （未成年人姓名）为被保险人，向保险公司
					投保研学出行相关的意外伤害保险（包括以死亡为给付条
					件的意外保险）。在保险投保、履约、服务等有关的场景
					中，同意前述研学机构、相关保险人、保险人指定的相关
					服务、救援、医疗等合作单位，在包括不限于填写投保材
					料、支付保险费用、提供服务救援医疗、及在必要场景下
					获取、使用和处理监护人和被监护人的有关个人信息（含
					敏感信息）。
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getwxJoinActivity
	} from '../../api/login.js'
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
				parentList: {
					docNumber: "", //家长身份证
					phoneNubmer: "", //家长手机号
					realName: "", //家长名字
					belongId: '', //活动id
					belongType: "02", //默认值
					participantType: "0", //0家长
					relation: "0", //家长默认关系值
					docType: "01", //默认身份证
					isAuthorized: "1", //通知书授权
				},
				childList: [{
					docNumber: "", //孩子身份证
					phoneNubmer: "", //孩子手机号
					realName: "", //孩子名字
					belongId: 1, //活动id
					belongType: "02", //默认值
					participantType: "1", //1孩子
					relation: "", //与父母默认关系值
					docType: "01", //默认身份证
					isAuthorized: "1", //通知书授权
					relationship: '请选择'
				}, ],
				belongId: "",
				actions: [{
						name: '父子',
						value: '1'
					}, {
						name: '母子',
						value: '2'
					}, {
						name: '父女',
						value: '3'
					}, {
						name: '母女',
						value: '4'
					},
					{
						name: '其他',
						value: '0'
					},
				],
				// rules: {
				// 	'userInfo.name': {
				// 		type: 'string',
				// 		required: true,
				// 		message: '请填写姓名',
				// 		trigger: ['blur', 'change']
				// 	},
				// },
				radio: '',
				switchVal: false,
				endInfoList: [],
				show: false,
				relationship: '请选择',
				listIndex: '',
				value: '',
				rodiolist: [{
					name: '已授权并同意',
					disabled: false
				}, ],
				showBook: false,
			}
		},
		mounted() {
			this.endInfoList = []
			// getwxJoinActivity(this.infodata).then(res => {
			// 	console.log(res);
			// })
		},
		methods: {
			open() {
				// console.log('open');
			},
			sexSelect(index) {
				console.log(index);
			},
			relation(item) {
				this.show = true
				console.log(item);
				this.listIndex = item
			},
			relaClick(item) {
				console.log(item);
				this.childList[this.listIndex].relation = item.value
				this.childList[this.listIndex].relationship = item.name
				this.show = false
			},
			addChild() {
				const data = {
					docNumber: "", //孩子身份证
					phoneNubmer: "", //孩子手机号
					realName: "", //孩子名字
					belongId: this.sysDeptId, //活动id
					belongType: "02", //默认值
					participantType: "1", //1孩子
					relation: "", //与父母默认关系值
					docType: "01", //默认身份证
					isAuthorized: "1", //通知书授权
					relationship: '请选择'
				}
				this.childList.push(data)
				console.log(this.childList);
			},
			registration() {
				if (this.value == '已授权并同意') {
					this.endInfoList.push(this.parentList)
					this.childList.forEach(item => {
						this.endInfoList.push(item)
					})
					uni.showLoading({
						title: '登记中'
					});

					getwxJoinActivity(this.endInfoList).then(res => {
						console.log(res);
						this.$refs.uToasts.show({
							type: 'success',
							title: '成功主题(带图标)',
							message: "登记完成，请返回查看",
							url: 'pages/login/index',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						}, )
						uni.hideLoading();
					})
				} else {
					this.$refs.uToasts.show({
						type: 'default',
						title: '默认主题',
						message: "请勾选并查看知情同意书",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					}, )
				}

			},
			groupChange(n) {
				if (this.value == '已授权并同意') {
					this.value == '未授权'
				} else {
					this.value == n
				}
			},
			agremnet() {

			}
		},
		// id
		onLoad: function(option) {
			this.sysDeptId = option.belongId
			this.parentList.belongId = option.belongId
			this.childList[0].belongId = option.belongId
		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss">
	.insurecontent {
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #F5F8FA;
	}

	.insurecontentbox {
		width: 92%;
		// height: 186rpx;
		background-color: #fff;
		margin-top: 15rpx;
		padding: 4%;
	}

	.boxtitle {
		position: relative;
		width: 135rpx;
		height: 38rpx;
	}

	.boxtitletext {
		font-size: 31rpx;
		color: #333333;
		line-height: 33rpx;
		font-weight: bold;
	}

	.boxtitlebg {
		width: 135rpx;
		height: 21rpx;
		background: #5098E1;
		opacity: 0.15;
		position: absolute;
		bottom: 0;
	}

	.boxtitlebg1 {
		width: 135rpx;
		height: 21rpx;
		background: #5098E1;
		opacity: 0.15;
		position: absolute;
		bottom: -5rpx;
		left: 40%
	}

	.boxtitletext1 {
		font-weight: bold;
		font-sizeL: 31rpx;
		color: #000;
	}

	.boxcontent {
		margin-top: 20rpx;
		width: 100%;
		height: 30rpx;
	}

	.boxcontentleft {
		float: left;
		font-size: 25rpx;
		color: #000000;
		line-height: 38rpx;
	}

	.boxcontentright {
		float: right;
		font-size: 25rpx;
		color: #000000;
		line-height: 38rpx;
		font-weight: bold;
	}

	.insurecontentbox1 {
		width: 100%;
		height: 40rpx;
	}

	.boxtitle1 {
		float: left;
	}

	.boxtitle2 {
		text-align: center;
		font-size: 24rpx;
		color: #005CAB;
		line-height: 38rpx;
		position: relative;
	}

	.insurecontent /deep/.u-form-item__body__left__content__label {
		color: #666666;
	}

	.bottombutton {
		position: fixed;
		bottom: 0;
		width: 92%;
		background: #fff;
		// height: 232rpx;
		box-shadow: 0rpx 13rpx 71rpx 9rpx rgba(0, 0, 0, 0.03);
		padding: 4%;
		z-index: 99;
	}

	.spanfang {
		font-size: 22rpx;
		color: #005CAB;
		line-height: 30rpx;
	}

	.spanfang1 {
		font-size: 22rpx;
		color: #666;
		line-height: 30rpx;
	}

	.button-bottom {
		text-align: center;
		width: 90%;
		height: 90rpx;
		background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
		border-radius: 45rpx;
		font-size: 31rpx;
		color: #FFFFFF;
		line-height: 33rpx;
		line-height: 90rpx;
		margin-left: 5%;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}

	.addxuesheng {
		margin-top: 40rpx;
		margin-bottom: 220rpx;
	}

	.textopen {
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1rpx solid #EBEBEB;
		width: 86%;
		margin-left: 7%;
		font-size: 29rpx;
		color: #333333;
	}

	.textopentitle {
		width: 100%;
		text-align: center;
		line-height: 110rpx;
		font-size: 29rpx;
		color: #333333;
	}

	.textopenheng {
		height: 17rpx;
		background: #CECECE;
		opacity: 0.7;
		width: 100%;
	}

	.insurecontent /deep/.u-popup__content {
		border-radius: 30rpx 30rpx 0 0;
	}

	.radio {
		position: absolute;
		font-size: 22rpx;
		color: #000;
		margin-top: -20rpx;
		margin-left: 5rpx;
	}

	.radio /deep/ span {
		font-size: 22rpx;
	}

	.radioxieyi {
		position: absolute;
		right: -400rpx;
		top: -4rpx;
		width: 400rpx;
	}

	.insurecontentBook {
		padding: 8%;
	}
</style>